<script lang="ts" setup>
import { getSvg } from "@/utils";
import useDateList, { useDateListRefs } from "./useDateList";
defineOptions({
  name: "DatePicker"
});
const { toggleShowSelDate, handleSelDate } = useDateList();
const { dateList, curDate, showDateList } = useDateListRefs();
// const { dayjs } = useDayjs();
</script>
<template>
  <div class="w-254 mx-auto mb-14 relative">
    <div
      @click="toggleShowSelDate"
      class="w-full h-34 lh-34 center gap-x-8 rounded-5 b-2 b-solid b-#C0E1FF"
    >
      <span class="font-normal text-14 color-[#000] lh-16 not-italic"
        >{{ $t("title12") }}:
      </span>
      <span class="font-bold text-14 color-[#0094CF] lh-16 not-italic">{{
        curDate
      }}</span>
      <img class="w-10 h-5" :src="getSvg('Frame_405')" alt="" />
    </div>
    <ul
      v-if="showDateList"
      class="absolute top-34 left-0 z-999 bg-[#fff] w-full h-228 overflow-y-auto scroll-bar b-1 b-solid b-#E4F1FF rounded-4 font-normal text-12 color-[#444] text-center not-italic"
    >
      <li
        :class="[
          'h-38 lh-38',
          curDate === it.draw_date ? 'bg-#DFF0FF color-#227FD0' : ''
        ]"
        v-for="(it, idx) in dateList"
        :key="idx"
        @click="handleSelDate(it)"
      >
        {{ it.draw_date }}
      </li>
    </ul>
  </div>
</template>
